<template >
    <div class="p">
        <div class="pop">
            <img src="../../assets/userpoint-bg-825ba0058b.png" alt="">
            <p>当前可用魔力值</p>
            <div class="moli">
                <p>0</p>
                <div class="el-icon-position"></div>
            </div>
            <div class="moli2">
                <a href="#">玩转魔力值 ></a>
            </div>
        </div>
        <div class="pop1">
            <p>最近魔力值明细</p>
            <div class="pop1-1">
                <span>时间</span>
                <span>收入/支出</span>
                <span>详细说明</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.p {
    width: 856px;
    overflow: hidden;
}
.pop {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    // width:896px;
    height: 190px;
    margin: 30px 0 0 0;
    >img {
        width: 896px;
        height: 195px;
    }
    >p {
        font-size: 14px;
        line-height: 20px;
        width: 975px;
        height: 20px;
        left: 50%;
        margin-left: -50px;
        position: absolute;
        top: 10%;
        color: aliceblue;
    }
    >.moli2 {
        border-radius: 16px;
        position: absolute;
        bottom: 10%;
        left: 50%;
        // margin: 0 auto;
        margin-left: -70px;
        width: 142px;
        background-color: #fff;
        height: 32px;
        text-align: center;
        cursor: pointer;   
        >a {
            text-decoration: none;
            color: #6a3fbe;
            font-size: 15px;
            line-height: 32px;
        }
    }
    >.moli {
        position: relative;
        position: absolute;
        font-size: 56px;
        line-height: 78px;
        left: 50%;
        margin-left: -25px;
        top: 25%;
        color: aliceblue;
        >p {
            width: 31px;
            height: 78px;
        }
        >.el-icon-position {
            position: absolute;
            top: 50%;
            margin-top: 5px;
            margin-left: 35px;
            font-size: 20px;
            // background-image: url(../../assets/jl.png);
            // background-position: -409px -274px;
            // width: 13px;
            // height: 20px;
            // background-repeat: no-repeat;
            // background-size: 637px 552px;
            // display: inline-block;
            // background-color: transparent;
        }
    }
}
.pop1 {
    font-size: 17px;
    color: #323038;
    // margin: 35px 0 28px;
    p {
        margin: 35px 0 28px;
    }
}
.pop1-1 {
    width: 975px;
    background-color: #f6f6f6;
    line-height: 56px;
    height: 56px;
    span {
        display: inline-block;
        width: 265px;
        padding-left: 35px;
        color: #323038;
        font-size: 14px;
    }
}
</style>